import { useEditor } from '@craftjs/core';
import { Button, Col, Row } from 'antd';
import { CardInfo, ProForm, ProTable as RexProTable } from './BaseComponents';

export const ToolBox = () => {
  const {
    connectors: { create },
  } = useEditor();

  return (
    <div
      style={{
        height: '100%',
        borderRight: '1px solid #9d9d9d',
        boxSizing: 'border-box',
        padding: 10,
      }}
    >
      <Row gutter={[10, 10]} justify={'start'}>
        <Col span={12}>
          <Button
            block
            ref={(dom) =>
              create(dom as HTMLAnchorElement, <CardInfo title="Card Info" />)
            }
          >
            CardInfo
          </Button>
        </Col>
        <Col span={12}>
          <Button
            block
            ref={(dom) => create(dom as HTMLAnchorElement, <RexProTable />)}
          >
            ProTable
          </Button>
        </Col>
        <Col span={12}>
          <Button
            block
            ref={(dom) => create(dom as HTMLAnchorElement, <ProForm />)}
          >
            ProForm
          </Button>
        </Col>
      </Row>
    </div>
  );
};
